<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <title>vue</title>
    <style type="text/css">
    .cgColor{
        color: red;
    }
    .cgLength{font-size: 50px;}
    </style>
</head>
<body>
	<!-- 000.指定Vue作用域 -->
    <div id="vue-app">
        <!-- 007.计算属性 -->
            <!-- 我们打开控制台会发现，每当执行一次计算累加，method中的全部方法都会被触发执行，因此效率会很低 -->
            <!-- 所以我们将使用computed来处理方法，并将addToA()的括号去掉成为addToA -->
            <!-- 计算属性一般用在类似搜索和耗时，计算比较大的地方才会使用 -->
        <h3>Computed 计算属性</h3>
        <button v-on:click="a++">A加</button>
        <button v-on:click="b++">B加</button>
        <p>A:{{ a }}</p>
        <p>B:{{ b }}</p>
        <p>Age + A = {{ addToA }}</p>
        <p>Age + B = {{ addToB }}</p>
        <!-- 008.样式绑定，是KV结构(本质是个对象)，K是属性名，V是属性值，true或false -->
        <h1 v-bind:class="{cgColor:cgColor}">我是第一个</h1>
            <!-- 单击的时候属性取反 -->
        <button v-on:click="cgColor = !cgColor">点一下试试</button>
        <h1 v-bind:class="cpClass">我是第二个</h1>
        <button v-on:click="cgColor = !cgColor">换颜色</button>
        <button v-on:click="cgLength = !cgLength">换大小</button>
        <hr>
        <!-- 009.if条件，通过if条件判断，可以实现显示隐藏，注意，if判断为false时dom将直接删除，true时生成 -->
        <button v-on:click="error = !error">错误</button>
        <button v-on:click="success = !success">错误解决</button>
            <!-- 也可以使用v-show来判断，相比于v-if，v-show的优势是不删除dom元素，之改变显示隐藏(display) -->
        <p v-if="error">貌似出现什么问题了</p>
        <p v-else-if="success">问题解决！</p>
        <hr>
        <!-- 010.for循环 如果获取某个指定的元素，可以通过下标，例如arr[0]-->
        <ul>
            <li v-for="arr_elem in arr">
            {{arr_elem}}
            </li>
        </ul>
            <!-- 渲染数据时不想循环当前for元素所在的标签，那么这个标签可以是<template v-for=""，这样避免外层dom的循环 -->
        <ul>
            <li v-for="(user,index) in users">
                <h4>{{index}} . {{user.name}} - {{user.sex}} - {{user.age}}</h4>
                <!-- 循环对象身上的k-v -->
                <template v-for="(my_val,key) in user">
                    <p> {{key}} - {{my_val}} </p>
                </template>
            </li>
        </ul>
        
    </div>
    <div id="vue-app-two">
        <greeting></greeting>
    </div>
    <script type="text/javascript">
    // vue组件，使用自定义标签进行输出模板
    Vue.component("greeting",{
        // 注意，模板里有且仅能有一个根标签，使用ES6语法的 ` 可以实现换行，不用\n
        template:`<h3>大家好，我是{{name}}<button v-on:click="changeName">改名</button></h3>    
        `,
        data: function(){  // 定义模板数据
            return {
                name: "刘德华"
            }
        },
        methods: {
            changeName:function(){
                this.name = "张学友";
            }
        }
    });
    // 001.实例化Vue对象
    var one = new Vue({
        el: "#vue-app",
        data: {
            age: 22,
            a: 0,
            b: 0,
            cgColor: false,
            cgLength: false,
            error: false,
            success: false,
            arr: ["凤凰传奇","火鸡传奇","大雁传奇"],
            users: [
                {name: "张三",sex: "男",age: 20},
                {name: "李四",sex: "女",age: 25},
                {name: "王五",sex: "男",age: 30}
                ]
        },
        methods: {
            // addToA: function(){
            //     console.log("A执行");
            //     return this.a + this.age;
            // },
            // addToB: function(){
            //     console.log("B执行");
            //     return this.b + this.age;
            // }

        },
        computed: {
            addToA: function(){
                console.log("A执行");
                return this.a + this.age;
            },
            addToB: function(){
                console.log("B执行");
                return this.b + this.age;
            },
            cpClass: function(){
                return {
                    cgColor: this.cgColor,
                    cgLength: this.cgLength
                }
            }
        }
    });

    /**
     * 
     * 
     * 
     */
var two = new Vue({
        el: "#vue-app-two",
        data: {
            twoTitle: "我是第二个"
        },
        methods: {
            changeAge:function(){
                one.age=33;     //修改上一个vue对象中的值
            }
        },
        computed: {},
        beforeCreate:function(){
            // 可以整一些加载动画
            console.log("1.组件实例化前触发……");
        },
        created(){
            console.log("2.组件实例化成功(页面未显示)……");
            // 我们拿到一些网络接口测试数据，数据源自：http://jsonplaceholder.typicode.com/
            this.$http.get("http://jsonplaceholder.typicode.com/users").then((data) => {console.log(data);});
        },
        beforeMount:function(){
            // 挂载之前，可以做一些例如请求网络接口数据的事
            console.log("3.组件挂载之前(页面未显示，虚拟dom配置完成……");
        },
        mounted:function(){
            console.log("4.组件挂载成功，成功显示……");
        },
        beforeUpdate:function(){
            console.log("5.组件更新前，页面尚未开始更新，虚拟dom配置完成……");
        },
        updated:function(){
            console.log("6.组件更新完成，页面成功显示……");
        },
        beforeDestory:function(){
            console.log("7.组件销毁前……");
        },
        destoryed:function(){
            console.log("8.组件已销毁……");
        }
    });
    //或者可以直接改
    two.twoTitle = "我改了";
    
    </script>
</body>
</html>